import React from 'react'
import { useEffect, useState, useRef } from 'react'

import Myfunchild from '../components/Myfunchild';

type Props = {};
interface userinfoType {
    name: string,
    age: number
}
export default function MyFun(props: Props) {
    const [userinfo, setuserInfo] = useState<userinfoType>({ name: '张三', age: 20 })

    const ref1 = useRef<HTMLInputElement>(null);
    const changeuserinfoFn = (e: any) => {
        setuserInfo({ ...userinfo, name: e.target.value })
    }
    return (
        <div>
            <p>函数组件</p>
            <p onClick={() => {
                userinfo.age++;
                userinfo.name = '谢婷'
                setuserInfo({ ...userinfo })
            }}>{userinfo.name}--{userinfo.age}</p>
            {/* 受控组件 */}
            <p>
                {/* <input type="text" value={userinfo.name} onChange={(e) => {
                    // userinfo.name = e.target.value
                    setuserInfo({ ...userinfo, name: e.target.value })
                }} /> */}
                <input type="text" value={userinfo.name} onChange={changeuserinfoFn} />
            </p>

            {/* 非受控组件 */}
            <p>
                <input ref={ref1} type="text" defaultValue={userinfo.name} />
                <button onClick={() => {
                    // 方式1:对象的可选链方式
                    console.log(ref1.current?.value);
                    // 方式2: 类型断言
                    console.log((ref1.current as HTMLInputElement).value);


                }}>提交表单</button>
            </p>

            {/* 使用子组件 */}
            <Myfunchild userinfo={userinfo} changeuserinfoFn={changeuserinfoFn}></Myfunchild>

        </div >
    )
}